HTML Forms

    Forms are generally used to collect data or input from the user. Forms are considered as the standard data collector elements.

    HTML <form> Element

    To define a form structure on the web browser, we use the <form> element.

    Example: 

    <form>
   .. form  body
</form>

    Only the <form> element is not enough to present a fully-fledged form. It requires some other elements to define different fields.

    HTML <input> Element

    <input> element is a nested element of <form>, and it specify a block in which the user can fill the data. It has an attribute type which specifies the type of input.

    <input type=”” > Description
    <input type="text"> It specifies text input
    <input type="password"> It specify a input block for password
    <input type="radio"> It specifies a radio button input, where the user can select from various options.
    <input type="submit"> It specifies a button for submitting the form data.

    There are many other values for type attribute.

    Example: 

    <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
  <form>
    <p>Email: <input type="text"></p>
    <p>Password <input type="password"> </p>
    <input type="submit" value ="login">
  </form>
</body>
</html>

    Output: 

    Email: 
Password

    Input Element Text field

    The type attribute's text value is used to define an input block for textual data. Using the text value, we define a single-line input field for text input.

    Example 

    <form>
   <p>Email: <input type="text"></p>
   <p>Password <input type="text"> </p>
</form>

    Output 

    Email: 
Password

    <label> Element

    <label> is a semantic element which is often used with the input element to provide a name to the input block. The main objective of <label> element to represent a text content for the input block, so the user could understand what detail should be filled in that particular block. <label> has an attribute for which value should always be equivalent to the input id attribute.

    Example 

    <form>
    <label for="email">Email</label> <br/>
    <input type="text" id ="email"> <br/>

    <label for="pass">Password</label> <br/>
    <input type="Password" id ="pass"> <br/> 
</form>

    Output: 

    Email 
 
Password

    Radio button <input type="radio">

    Radio buttons are also a method of collecting data from the user, using radio button we give multiple options to the user, and he/she can select one from those options.

    Example: 

    <form>
  
  <input type="radio" id="HTML" name="front_end" value="HTML">
  <label for="HTML">HTML</label><br>

  <input type="radio" id="CSS" name="front_end" value="CSS">
  <label for="CSS">CSS</label><br>

  <input type="radio" id="JS" name="front_end" value="JS">
  <label for="JS">JavaScript</label>

</form>

    Output 

    HTML
CSS
JavaScript

    Submit Button <input type="submit">

    Each form must contain a submit button, and that should be put at the bottom of the form element. Once the user clicks on the submit button, the data filled in the form blocks sent to the page mentioned in action. Generally, the submit button is used to send the data to the server.

    Example 

    <form action ="/login.php/">     

<label for="email">Email</label> <br/>     
<input type="text" id ="email"> <br/>     

<label for="pass">Password</label> <br/>     
<input type="Password" id ="pass"> <br/> 

<input type="submit" value="Login">
</form>

    Output 

    Email 
 
Password

    The value the attribute specifies the text that should appear on the submit button.

    <form> action Attribute

    The action attribute specifies what action should be performed once the user hit the submit button. For most of the case, the action attribute represents a backend file which normally deals with data at the server-side.

    Example 

    <form action =" /login.php">

    Here the after the user hits the submit button the data go to the login.php page. If there is no action attribute in the form element, then the action would be performed on the same page.

    <form> target Attribute

    target is the <form> attribute and it specifies whether to open a new tab or not after the user clicks the submit button. To open a new tab for the submit result set the target attribute to "_blank" value.

    Example 

    <form action ="/login.php/" target="blank">

    by default the target value is "_self", which mean the submit button lead to the same tab.

    Form Method attribute

    The method attribute specifies the HTTP request or method. This attribute accepts two values "get" or "post".

    Example 

    <form action ="/search.php/" method="get">
<form action ="/login.php/" method="post">

    When to use GET method

    By default, the form accepts the "get " method. When you submit the form under get method, the form detail would be displayed on the address link. Get method is generally used when there is no confidential detail in the form input. 

    <form action ="/search.php/" method="get">

    When to use post method

    Post method generally used when we want to add data in the database connected to the backend services. Post method used with confidential data and it does not display the form detail on the address bar when the user hits the submit button. 

    <form action ="/add_user.php/" method="post">

    Name attribute

    It is essential to put the name attribute with every input element. The backend programming languages use the name attribute to collect the data from specific input block. 

    <form action="/search.php">
  <label for="add">Address</label><br>
  <input type="text" id="add" name ="address"><br><br>
  <input type="submit" value="Submit">
</form>

    Summary

    • Forms are used to collect data and input from the user.
    • Form make the webpage more interactive.
    • <input> element specify the bock of input where users can fill the data.
    • The type attribute of input specify which data should be filled in the input block
    • <label> is used to provide a textual name to the input block.
    • <form> action attribute specify what to do with the data submitted by the user.
    • Every <input> element must have a name attribute.
    Next Tutorial